<template>
    <!-- 订单标题 订单状态 -->

    <div class="mb-4 p-4 bg-gray-50 rounded-lg">
        <div class="flex justify-between">
            <p class="text-xs text-gray-400">订单号 {{ orderInfo.orderId }}</p>
            <p>{{ OrderStatusConfig[orderInfo.status].statusText }}</p>
        </div>
        <!-- 商品信息 -->
        <productCardCom
            v-for="(productInfo, index) in orderInfo.productList"
            :key="index"
            :productInfo="productInfo"
        ></productCardCom>

        <nut-divider dashed></nut-divider>

        <div class="flex justify-between pb-4">
            <p class="text-xs text-gray-400">{{ orderInfo.createAt }}</p>
            <p class="text-xs">
                共{{ orderInfo.productList.length }}件商品 合计：¥{{ orderInfo.totalPrice }}
            </p>
        </div>
        <div class="flex justify-end">
            <div
                v-for="(btn, index) in OrderStatusConfig[orderInfo.status].btnList"
                :key="index"
                class="ml-2"
                @click="btnClick(btn)"
            >
                <nut-button :type="btn.type || 'primary'" size="small">{{ btn.text }}</nut-button>
            </div>
        </div>
    </div>

    <!-- 时间 共几件商品/合计几元
  操作区域 去支付/去催货/去评价/退款售后 -->
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import productCardCom from './productCardCom.vue'
import { Iproduct } from '@/config/interface'
import { OrderStatusText, OrderStatusConfig } from '@/config/index'

// 1.组件入参
interface IOrder {
    id: number
    orderId: string
    totalPrice: number
    contactAddress: string
    contactPhone: string
    contactName: string
    status: string
    createAt: string
    updateAt: string
    userId: number
    productList: Iproduct[]
}

const props = defineProps<{
    orderInfo: IOrder
}>()
const orderInfo = ref(props.orderInfo)

const btnClick = (btnInfo) => {
    switch (btnInfo.target) {
        case 'pay':
            Taro.navigateTo({
                url: `/pages/order/detail/index?orderId=111`
            })

            break

        case 'cancel':
            console.log('取消')
            Taro.showToast({
                title: '取消成功'
            })
            break

        case 'comment':
            Taro.showToast({
                title: '去添加评论，带上商品ID'
            })
            break

        case 'delete':
            Taro.showToast({
                title: '删除成功'
            })
            break

        default:
            break
    }
}
// 2.组件emit
// 3.组件slot
</script>
